<template>
	<div class="">
		<!--<base-header></base-header>-->
		<div class="login-bg"></div>
		<div class="app-login">
			<img class="app-logo register-logo" src="../../assets/logo.jpg" />
			<div class="app-input-div">
				<img class="app-tips" src="../../assets/icon/user_info.png" />
				<input v-model="name" class="app-input" type="text" placeholder="请输入真实姓名" name="" id="" value="" />
			</div>
			<div class="app-input-div">
				<img class="app-tips" src="../../assets/icon/phone.png" />
				<input v-model="tel" class="app-input" type="tel" placeholder="请输入手机号" name="" id="" value="" />
			</div>
			<div class="app-input-div">
				<img class="app-tips" src="../../assets/icon/code.png" />
				<input v-model="code" class="app-input app-code" type="number" placeholder="验证码" name="" id="" value="" />
				<span @click="sendCode" class="sendCode">发送验证码</span>
			</div>
			<div class="app-input-div">
				<img class="app-tips" src="../../assets/icon/password.png" />
				<input v-model="password" class="app-input" type="password" placeholder="请输入密码" name="" id="" value="" />
			</div>
			<div class="app-input-div">
				<img class="app-tips" src="../../assets/icon/password.png" />
				<input v-model="password_two" class="app-input" type="password" placeholder="请再次输入登录密码" name="" id="" value="" />
			</div>
			<span @click="register" :class="{choose : isLogin}" class="app-login-button register-button">注 册</span>
		</div>
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	export default {
		name: 'register',
		components: {
			BaseHeader
		},
		data() {
			return {
				name: '',
				tel: '',
				code: '',
				password: '',
				password_two: ''
			}
		},
		computed: {
			isLogin: function() {
				if(this.name && this.tel && this.code && this.password && this.password_two) {
					return true;
				} else {
					return false;
				}
			}
		},
		methods: {
			//注册
			register() {
				if(this.isLogin) {
//					this.$router.push({
//						path: '/login'
//					});
					var self = this;
					var data = {
						name: self.name,
						mobile: self.tel,
						password: self.password,
						code: self.code,
						password_confirmation: self.password_two
					};
					$.post(global.domain + global.API.guest_register, data, function(msg) {
						//self.isloading = false;
						if(msg.error == 0) {
							self.$router.push({
								path: '/login'
							});
						} else {
							self.$layer.alert(msg.error_msg);
							console.log(msg.error);
						}
					}, 'json');
					console.log(this.isLogin);
				} else {
					console.log(this.isLogin);
				}
			},
			//发送验证码
			sendCode() {
				var self = this;
				var data = {
					mobile: self.tel
				};
				$.post(global.domain + global.API.guest_register_code, data, function(msg) {
					//self.isloading = false;
					if(msg.error == 0) {
						self.$layer.alert('发送成功');
						console.log('发送成功');
					} else {
						self.$layer.alert(msg.error_msg);
						console.log(msg.error);
					}
				}, 'json');
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/user.css";
</style>